import React, { memo } from 'react'
import { TabPaneWrapper } from './style'
import { Tabs } from 'antd'
import proptypes from 'prop-types'

const { TabPane } = Tabs

function B_TabPane(props) {
  const { tabPosition = 'left', data = [] } = props
  return (
    <TabPaneWrapper>
      <Tabs tabPosition={tabPosition} type="line">
        {data &&
          data.length > 0 &&
          data.map((item) => {
            if (item.mini === 1) {
              return (
                <TabPane
                  className="animate__animated animate__flipInX"
                  tab={item.indivKey}
                  key={item.id}
                >
                  {item.indivValue}
                </TabPane>
              )
            } else {
              return null
            }
          })}
      </Tabs>
    </TabPaneWrapper>
  )
}

B_TabPane.propTypes = {
  tabPosition: proptypes.string,
  data: proptypes.array
}

export default memo(B_TabPane)
